<template>
  <div class="coverAll">
    <div class="localTime" :style="isPhone? 'font-size: 50px;' : 'font-size: 150px'">
      <span>{{state.localTime}}</span>
    </div>
    <div class="content">
      <div>
        <div class="box">
          <div class="box-card">
            <el-form
              :label-position="state.labelPosition"
              label-width="60px"
              :model="state.formLabelAlign"
            >
              <el-form-item :label="t('username')">
                <el-input v-model="state.formLabelAlign.username"></el-input>
              </el-form-item>
              <el-form-item :label="t('password')">
                <el-input
                  v-model="state.formLabelAlign.password"
                  :type="state.passwordType"
                >
                  <template #suffix>
                    <i
                      class="el-input__icon el-icon-view"
                      @click="changeType"
                    ></i>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button
              type="primary"
              class="login"
              :loading="state.loginLoading"
              @click="login"
            >{{t('login')}}</el-button>
            <div
              class="regist"
              @click="regist"
            >{{t('regist')}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, reactive, getCurrentInstance, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
import { getDate } from "../utils/utils";
import { useRouter } from "vue-router";
import { getLogin } from "../api/apis";

defineProps({
  msg: String,
});

onMounted(() => {
  setInterval(() => {
    state.localTime = getDate();
  }, 1000);
});
const { ctx } = getCurrentInstance();
const router = useRouter();
const store = useStore();

const isPhone = computed(() => {
  return store.getters.getIsPhone
})

const state = reactive({
  count: 0,
  loginLoading: false,
  localTime: getDate(),
  labelPosition: "right",
  formLabelAlign: {
    username: "",
    password: "",
  },
  passwordType: "password",
});

const { t } = useI18n();

function changeType() {
  state.passwordType = state.passwordType == "password" ? "text" : "password";
}
function login() {
  const params = JSON.parse(JSON.stringify(state.formLabelAlign));
  state.loginLoading = true
  getLogin(params).then((res) => {
    if (res.status === 1) {
      ctx.$notify({
        title: "登录成功",
        type: "success",
      });
      store.commit('getUser', {token: '1234556', ...res.data})
      store.dispatch('asyncGetRoutes', res.data.auth).then((res) => {
        state.loginLoading = false
        console.log('res', res)
        router.push('/layout/' + res[0].path)
      }).catch(() => {
        state.loginLoading = false
      })
      // console.log(store.dispatch('asyncGetRoutes'))
    } else {
      state.loginLoading = false
    }
  }).catch(() => {
    state.loginLoading = false
  });
  console.log(params);
}

function regist() {
  const params = JSON.parse(JSON.stringify(state.formLabelAlign));
  console.log(params);
}
</script>

<style scoped lang="scss">
.coverAll {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #40a0ff9c;
  .localTime {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .content {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-card {
      background-color: rgba(255, 255, 255, 0.6);
      padding: 40px;
      .login {
        width: 100%;
      }
      .regist {
        text-align: right;
        font-size: 12px;
        margin-top: 20px;
        cursor: pointer;
        color: #409eff;
      }
    }
  }
}
</style>